<template>
  <div class="countent">
    <div class="appmsg">
      <div class="appmsg_title">1.设置生成安装包相关</div>
      <div class="appmsg_item">
        <div class="msg_item_title">版本设置：</div>
        <div class="msg_item_version">
          <input style="width: 40px" class="iptNumber" type="number" min="1" max="10" v-model="appVersion[0]" /><span
            class="dian"> . </span>
          <input class="iptNumber" type="number" min="0" max="10" v-model="appVersion[1]" />
          <span class="dian"> . </span>
          <input class="iptNumber" type="number" min="0" max="10" v-model="appVersion[2]" />
        </div>
      </div>
      <div class="appmsg_item">
        <div class="msg_item_title">安卓/Android状态：</div>
        <div class="msg_item_Android">
          <el-checkbox v-model="Androidchecked" disabled>生成安卓版</el-checkbox>
        </div>
      </div>
      <div class="appmsg_item">
        <div class="msg_item_title">苹果/iOS状态：</div>
        <div class="msg_item_Android">
          <el-checkbox v-model="iOSchecked" disabled>生成苹果版</el-checkbox>
        </div>
      </div>
      <div class="createdBtn">
        <el-button class="createdOver" @click="createdApp" :disabled="createBtn">{{ createBtnMsg }}</el-button>
      </div>
    </div>
    <div class="appDownBox">
      <div class="appmsg_title">2.安装包下载</div>
      <div class="appdown">
        <div class="ewmBox">
          <div class="ewm">
            <canvas id="canvas" height="150" width="150" v-show="Android.erweimaUrl !== ''"></canvas>
            <div class="textMa" v-show="Android.erweimaUrl === ''">
              请 先 生 成 <br />
              安 装 包
            </div>
          </div>
          <div>安卓手机扫一扫下载</div>
        </div>
        <div class="IosAndAndroid">
          <div class="AndroidDown">
            <div>
              <img class="androidIcon" src="../../../../static/packApp/editApp/createMyApp/Android.png" alt="" />
              <span>安卓(Android):</span><span :style="Android.Style">{{ Android.Message }}</span>
            </div>
            <div class="androidTips mar_L">
              请扫描左边的二维码直接下载或者点击按钮下载安装包
            </div>
            <div class="mar_L androidDown" :style="Android.DownColor">
              <i class="iconfont iconxiazai-"></i>
              <a style="border: 0" :style="Android.DownColor" target="_blank"
                :href="Android.downUrl">下载安装包({{ Android.version }})</a>
            </div>
            <div class="mar_L">
              <el-button class="androidbtn" :disabled="Android.androidBtn" @click="uploadMyApp()">上传至我的应用</el-button>
            </div>
          </div>
          <div class="AndroidDown">
            <div>
              <img class="androidIcon" src="../../../../static/packApp/editApp/createMyApp/Apple.png" alt="" />
              <span>苹果(iOS)：</span><span :style="IOS.Style">{{ IOS.Message }}</span>
            </div>
            <div class="androidTips mar_L">
              苹果安装包请直接点击下载，获取IPA安装包文件
            </div>
            <div class="mar_L androidDown" :style="IOS.DownColor">
              <i class="iconfont iconxiazai-"></i>
              <a :style="IOS.DownColor" style="border: 0" target="_blank" :href="IOS.downUrl">
                下载安装包({{ IOS.version }})
              </a>
            </div>
            <div class="mar_L">
              <el-button class="androidbtn" :disabled="IOS.iosBtn" @click="uploadSuper()">上传至超级签名</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  var timer = null;
  import QRCode from "qrcode";
  export default {
    // props: ["appid"],
    data() {
      return {
        appid: "",
        Androidchecked: false,
        iOSchecked: false,
        createdIos: "",
        createdAndroid: "",
        appVersion: [],
        createBtn: false,
        createBtnMsg: "立即生成",
        Android: {
          Style: {
            color: "#000000" //安卓message的颜色
          },
          Message: "暂无下载安装包", //苹果message内容
          DownColor: {
            color: "#ff7629" //安卓下载的颜色
          },
          downUrl: "javascript:;",
          version: "请先生成",
          androidBtn: true,
          erweimaUrl: "" //安卓生成二维码的链接
        },
        // IOS
        IOS: {
          Style: {
            color: "#000000" //苹果message的颜色
          },
          Message: "暂无下载安装包", //苹果message内容
          DownColor: {
            color: "#ff7629" //苹果下载的颜色
          },
          downUrl: "javascript:;", //苹果下载地址
          version: "请先生成",
          iosBtn: true
        }
      };
    },
    methods: {
      getAppInfo() {
        this.appid = localStorage.getItem("appid");
        var params = new URLSearchParams();
        params.append("appID", this.appid);
        this.$post(this.API.createAppInfo, params).then(res => {
          console.log(res);
          if (res.code === 1) {
            if (res.data.createInfo.android_endtime === 1) {
              this.Androidchecked = true;
              this.createdAndroid = "1";
            } else {
              this.Androidchecked = false;
              this.createdAndroid = "-1";
            }
            if (res.data.createInfo.ios_endtime === 1) {
              this.iOSchecked = true;
              this.createdIos = "1";
            } else {
              this.iOSchecked = false;
              this.createdIos = "-1";
            }
            this.appVersion = res.data.createInfo.version;
            if (res.data.createInfo.status == 1) {
              this.createAppStatus();
            }
            // 判断苹果下载的链接
            let iosInfo = res.data.downInfo.iosInfo;
            let androidInfo = res.data.downInfo.androidInfo;
            if (iosInfo.downUrl) {
              this.IOS.downUrl = iosInfo.downUrl;
              this.IOS.Message = "已生成";
              this.IOS.version = iosInfo.version;
              this.IOS.DownColor.color = "#ff7629";
              this.IOS.iosBtn = false;
            }
            if (androidInfo.downUrl) {
              this.Android.erweimaUrl = androidInfo.downUrl;
              this.Android.downUrl = androidInfo.erweimaUrl;
              this.Android.Message = "已生成";
              this.Android.version = androidInfo.version;
              this.Android.DownColor.color = "#ff7629";
              this.Android.androidBtn = false;
              var payUrl = this.Android.erweimaUrl;
              var canvas = document.getElementById("canvas"); //二维码
              QRCode.toCanvas(canvas, payUrl, function (error) {
                if (error) console.error(error);
                // console.log("success!");
              });
            }
          }
        });
      },
      createdApp() {
        this.createBtnMsg = "请稍候...";
        this.createBtn = true;
        var params = new URLSearchParams();
        params.append("appID", this.appid);
        params.append("version", this.appVersion.join("."));
        params.append("ios", this.createdIos);
        params.append("android", this.createdAndroid);
        this.$post(this.API.createApp, params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.createAppStatus();
          }
        });
      },
      createAppStatus() {
        clearInterval(timer);
        var statusparams = new URLSearchParams();
        statusparams.append("appID", this.appid);
        var that = this;
        timer = setInterval(function () {
          that.$post(that.API.createAppStatus, statusparams).then(res => {
            console.log(res);
            if (res.data.status == 1) {
              that.createBtn = true;
              that.createBtnMsg = "排队中";
            }
            if (res.data.status == 2) {
              that.createBtn = true;
              that.createBtnMsg = "打包中";
            }
            if (res.data.status == 3) {
              that.createBtn = false;
              that.createBtnMsg = "已完成";
              clearInterval(timer);
              that.getAppInfo();
            }
          });
        }, 5000);
      },
      uploadMyApp() {
        this.Android.androidBtn = true;
        console.log("上传到我的应用");
        var params = new URLSearchParams();
        params.append("appId", this.appid);
        params.append("type", 2);
        this.$post(this.API.sendToApplication, params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.Android.androidBtn = false;
            // 该方法在headerview组件中被监听,实现路由跳转
            this.$root.$emit("goMyapp")
          }
        });

      },
      uploadSuper() {
        this.IOS.iosBtn = true;
        console.log("上传到超级签名");
        var params = new URLSearchParams();
        params.append("appId", this.appid);
        params.append("type", 1);
        this.$post(this.API.sendToApplication, params).then(res => {
          console.log(res);
          if (res.code === 1) {
            this.IOS.iosBtn = false;
            // 该方法在headerview组件中被监听,实现路由跳转
            this.$root.$emit("goMysuper")
          }
        });
      }
    },
    created() {
      console.log(localStorage.getItem("appid"));
      this.getAppInfo();
    },
    beforeDestroy() {
      console.log("beforeDestroy清除定时器");
      clearInterval(timer);
    }
  };

</script>

<style scoped>
  button {
    border: 0;
  }

  button:focus {
    outline: 0;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .countent {
    width: 100%;
    height: auto;
    background-color: #0f0f0f;
    padding: 30px;

  }

  .appmsg {
    width: 100%;
    height: auto;
  }

  .appmsg_title {
    width: 100%;
    height: auto;
    padding: 14px 0;
    color: #fff;
    border-bottom: 1px solid #e8e8e8;
  }

  .appmsg_item {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .appmsg_item .msg_item_Android>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #fff;
  }

  .appmsg_item .msg_item_Android>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    color: #ff7926;
    border-color: #000;
  }

  .msg_item_title {
    width: 135px;
    color: #fff;
    text-align: right;
    margin-right: 10px;
  }

  .msg_item_version {
    flex: 1;
    max-width: 910px;
    height: auto;
  }

  .iptNumber {
    width: 50px;
    height: 36px;
    text-align: center;
    background-color: #0f0f0f;
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    color: #ccc;
  }

  .createdBtn {
    width: 100%;
    height: auto;
    padding: 8px 0;
    background-color: #0f0f0f;
    margin-top: 30px;
  }

  .createdOver {
    width: 100px;
    height: 36px;
    background-color: #ff7926;
    border-radius: 4px;
    color: #fff;
    margin-left: 38px;
  }

  .appDownBox {
    width: 100%;
    height: auto;
    margin-top: 50px;
  }

  .appdown {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
  }

  .ewmBox {
    width: 200px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-right: 20px;
    border: 1px solid #333;
    color: #fff;
  }

  .ewm {
    width: 150px;
    height: 150px;
  }

  .textMa {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-top: 10px;
    text-align: center;
    border: 1px solid #333;
    color: #fff;
  }

  .IosAndAndroid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
  }

  .androidIcon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  .downIcon {
    width: 20px;
    height: 20px;
  }

  .mar_L {
    margin-left: 20px;
  }

  .androidTips {
    margin-top: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .androidDown {
    margin-top: 30px;
  }

  .androidbtn {
    width: 190px;
    height: 36px;
    background-color: #ff7926;
    border-radius: 4px;
    margin-top: 30px;
    color: #fff;
  }

  #canvas {
    width: 150px !important;
    height: 150px !important;
  }

</style>
